<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统监控</el-breadcrumb-item>
			<el-breadcrumb-item>基本信息</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片布局 -->
		<el-card>
			<el-row>
				<template :id="container" v-if="dataInfo && dataInfo.length > 0">
					<el-col :span="12" v-for="(item, index) in dataInfo" :key="'dataInfo' + index">
						<div :title="item.desc" :id="item.name" :datasource="item.used" style="height:500px;"></div>
					</el-col>
				</template>
			</el-row>
		</el-card>
	</div>
</template>

<script>
import { getSysInfo } from '@/api/system';
import * as echarts from 'echarts';
export default {
	data() {
		return {
			description: '磁盘监控',
			//数据集
			dataInfo: [],

			echarts: [],
			option: {
				series: [
					{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						center: ['45%', '75%'],
						radius: '75%',
						min: 0,
						max: 1,
						splitNumber: 10,
						axisLine: {
							lineStyle: {
								width: 8,
								color: [[0.25, '#7CFFB2'], [0.5, '#58D9F9'], [0.75, '#FDDD60'], [1, '#FF6E76']]
							}
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '15%',
							width: 20,
							offsetCenter: [0, '-60%'],
							itemStyle: {
								color: 'inherit'
							}
						},
						axisTick: {
							length: 12,
							lineStyle: {
								color: 'inherit',
								width: 2
							}
						},
						splitLine: {
							length: 20,
							lineStyle: {
								color: 'inherit',
								width: 3
							}
						},
						axisLabel: {
							color: '#464646',
							fontSize: 15,
							distance: -55,
							rotate: 'tangential',
							formatter: function(value) {
								return Math.round(value * 100) + '%';
							}
						},
						title: {
							offsetCenter: [0, '15%'],
							fontSize: 25
						},
						detail: {
							fontSize: 30,
							offsetCenter: [0, '-35%'],
							valueAnimation: true,
							formatter: function(value) {
								return Math.round(value * 100) + '%';
							},
							color: 'inherit'
						},
						data: [
							{
								value: 0.7,
								name: 'xxx使用率'
							}
						]
					}
				]
			}
		};
	},
	methods: {
		initData() {
			getSysInfo().then(resp => {
				if (resp.success) {
					const data = [
						{
							name: 'CPU信息',
							total: resp.data.CPU.total,
							used: resp.data.CPU.used / 100,
							desc: resp.data.CPU.desc
						},
						{
							name: '内存信息',
							total: resp.data.MEMORY.total,
							used: resp.data.MEMORY.used / resp.data.MEMORY.total,
							desc: resp.data.MEMORY.desc
						}
					];
					this.dataInfo = data;
				}
			});
		},
		drawPicture() {
			var dataInfo = this.dataInfo;
			for (var i = 0; i < dataInfo.length; i++) {
				const info = dataInfo[i];
				this.option.series[0].data[0].name = info.name;
				this.option.series[0].data[0].value = info.used;
				var container = document.getElementById(info.name);
				this.echarts = echarts.init(container);
				console.log(this.echarts);
				this.echarts.setOption(this.option);
			}
		}
	},
	created() {
		this.initData();
	},
	mounted() {
    setTimeout(() => {
      this.drawPicture();
    }, 1500)
		setInterval(() => {
			this.initData();
			this.drawPicture();
		}, 1000*60);
	},
  beforeRouteUpdate (to, from, next) {
    // 处理路由变化的逻辑
    this.echarts.dispose()
    next()
  }
};
</script>

<style scoped>
div.el-breadcrumb {
	height: 45px;
}

.el-dialog__body {
	padding: 0px 15px;
}

.el-form-item {
	/* height: 68px; */
}
</style>
